import React, { useState, useEffect, useReducer } from 'react'
import { View, Text, TextInput, Button, StyleSheet, Image, TouchableOpacity, Alert } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法
import { ScrollView } from 'react-native-gesture-handler'
const collectlist = [
    { id: 1, img:{uri: 'https://reactnative.dev/img/tiny_logo.png'},fraction: 'Mrs Lin婚礼策划工作室', address: '韶山路怡景园13栋1门301' ,title1:'婚礼策划',title2:'棠湖古城'},
]

const Memorandum = (props) => {
    let { inputValue, inputChange,inputValue1, inputChange1, clickBtn, postFun, deleteFun, getFun, putFun,
        list,list1, data, post, } = props
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    return (
        <ScrollView style={{ flex: 1, backgroundColor: '#F5F5F5' }}>
            <View style={styles.top}>
                <Text style={styles.back} onPress={() => { props.navigation.push('Mine') }}>Back</Text>
                <Text style={styles.title}>备忘录</Text>
                <Text style={styles.save} onPress={clickBtn}>√</Text>
            </View>
            <Text style={styles.titlevalue}>标题：</Text>
            <TextInput style={styles.input}
                onChangeText={inputChange}
                multiline={true}
                autoFocus={true}
                value={inputValue}>
            </TextInput>
            <Text style={styles.titlevalue1}>内容：</Text>
            <TextInput style={styles.input}
                onChangeText={inputChange1}
                multiline={true}
                autoFocus={true}
                value={inputValue1}>
            </TextInput>
            <Text style={styles.jilu}>全部记录:</Text>
            <View>
                {
                    list.map((item, index) => {
                        return (
                            <TouchableOpacity style={styles.tab} key={index}
                                onPress={()=>{props.navigation.push('Bianqian',{item:item})}}
                            >
                                <Text style={styles.jilutitle}>{item.title}</Text>
                                <Text style={styles.time}>{item.time}</Text>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    time:{
        marginLeft:ptd(10),
        marginTop:ptd(10)
    },
    jilutitle:{
        fontSize:25,
        paddingLeft:ptd(10),
        paddingTop:ptd(5)
    },
    tab:{
        borderWidth:1,
        borderColor:'#ccc',
        width:ptd(300),
        height:ptd(80),
        marginLeft:ptd(35),
        backgroundColor:'white',
        borderRadius:10,
        marginTop:ptd(10)
    },
    jilu:{
        fontSize:20,
        marginTop:ptd(30),
        marginLeft:ptd(35)
    },
    titlevalue:{
        marginTop:ptd(50),
        marginLeft:ptd(35)
    },
    titlevalue1:{
        marginTop:ptd(20),
        marginLeft:ptd(35)
    },
    input:{
        marginLeft:ptd(35),
        borderColor:'#ccc',
        borderWidth:1,
        width:'80%'
    },
    save: {
        fontSize: 25,
        position: 'absolute',
        right: ptd(15),
        top: ptd(5)
    },
    note:{
        marginLeft:ptd(170),
        marginTop:ptd(10)
    },
    address:{
        marginLeft:ptd(170),
        marginTop:ptd(10)
    },
    fraction:{
        marginLeft:ptd(170),
        marginTop:ptd(10)
    },
    img:{
        height:ptd(110),
        width:ptd(150),
        position:'absolute',
        top:ptd(10),
        left:ptd(10)
    },
    lists: {
        width: '90%',
        height: ptd(130),
        borderTopRightRadius: 20,
        borderColor: '#ccc',
        borderWidth: 1,
        marginLeft: '5%',
        marginTop: 60
    },
    title: {
        fontSize: 20,
        position: 'absolute',
        top: ptd(7),
        left: ptd(160)
    },
    back: {
        paddingLeft: ptd(10),
        marginTop: ptd(10)
    },
    top: {
        position: 'absolute',
        width: '100%',
        height: 50,
        backgroundColor: '#F8F8F8',
        borderColor: '#F8F8F8',
        borderWidth: 2
    }
});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Memorandum);
